<template>
	<view class="orderRev_page">
		<view class="box_wrap te clearfix">
			<view class="title">
				订单类型
			</view>
			<view class="item_name">{{data.productName}}</view>
		</view>
		<view class="box_wrap clearfix">
			<view class="title">
				订单状态
			</view>
			<view class="status">{{data.stateName}}</view>
		</view>
		<view class="box_wrap clearfix">
			<view class="title">
				申请信息
			</view>
			<view class="form">
				<view class="item">
					<view class="title_sub">申请人姓名:</view>
					<view class="inpit_wrap">
						<input placeholder="请输入申请人真实姓名" disabled v-model="data.basicBorrowerName"/>
					</view>
				</view>
				<view class="item">
					<view class="title_sub">身份证号码:</view>
					<view class="inpit_wrap">
						<input placeholder="请输入申请人身份证号码" disabled v-model="data.basicBorrowerCard" />
					</view>
				</view>
				<view class="item">
					<view class="title_sub">联系电话</view>
					<view class="inpit_wrap">
						<input placeholder="请输入联系电话" disabled v-model="data.basicBorrowerPhone"/>
					</view>
				</view>
				<view class="item" v-if="data.basicBorrowerAddress">
					<view class="title_sub">居住地址:</view>
					<view class="inpit_wrap">
						<input placeholder="居住地址" disabled v-model="data.basicBorrowerAddress"/>
					</view>
				</view>
				<view class="item" v-if="data.basicLoansMoney">
					<view class="title_sub">申请金额:</view>
					<view class="inpit_wrap">
						<input placeholder="申请金额" disabled v-model="data.basicLoansMoney"/><text>( 万 )</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box_wrap clearfix">
			<view class="title">
				操作记录
			</view>
			<view class="wecentBor">
				<block v-for="item in data.operationRecordList" :key="item.id">
					<view class='weui-cell-list clearfix'>
						<view class='weui-cell-line clearfix'>
							<view class='weui-cell-circle'>
								<view></view>
							</view>
							<view class='weui-cell-time floarLeft'>{{item.updateTime}}</view>
							<view class='weui-cell-event floarLeft' v-if="data.state==0||data.state==1||data.state==2||data.state==3||data.state==11">
								{{item.empName}}{{item.description}}
								<view>{{item.causeRemark}}</view>
							</view> 
							<view class='weui-cell-event floarLeft'v-else>
								{{item.description}}
								<view style="color: #FF3347;">{{item.causeRemark}}</view>
							</view>
						</view>
					</view>
				</block>
				<!-- <view class="inptu">
					 <textarea class="area"  placeholder="请写一条"/>
				</view> -->
			</view>
		<!-- 	<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7"
			:radius="radius" width="100%" height="80rpx" font-size="32rpx" 
				>提交</wyb-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				radius: ["100px"]
			};
		},
		onLoad(option) {
			this.orderNum = option.orderNum;
			this.getOrderInfo(option.orderNum);
		},
		methods:{
			getOrderInfo(orderNum){
				this.$api.getOrderInfo(orderNum).then(res=> {
					this.data = res.data.data;
				})
			}
		}
	}
</script>
<style>
	page{height: 100%;background: #F8F8F8;}
</style>
<style lang="scss">
	.orderRev_page{width: 750rpx;margin: 0 auto;background: linear-gradient(to bottom, $dtg-color-primary 0%, $dtg-color-primary 20%,#f8f8f8 21%,#f8f8f8 100%);min-height: 100%;}
	.box_wrap{background: #FFFFFF;padding: 0 40rpx;}
	.te{border-radius: 20rpx 20rpx 0 0 ;}
	.title{font-size: 32rpx;font-weight: bold;color: #333333;line-height: 40rpx;margin: 20rpx 0;}
	.item_name{height: 56rpx;padding: 0 20rpx;border-radius: 6rpx;border: 1px solid #585CF7;color: #585CF7;background: #EEEEFE;font-size: 26rpx ;line-height: 54rpx;
	    display: inline-block}
	.status{
		font-size: 30rpx;color: #585CF7;
	}
	.form{
		.item{height: 80rpx;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #eee;}
		.title_sub{font-size: 30rpx;font-weight: 500;}
		.inpit_wrap{display: flex;justify-content: flex-end;align-items: center;flex: 1;}
		.inpit_wrap input{flex: 1;text-align: right;font-size: 26rpx;}
	}
	.wecentBor {padding: 40rpx 10rpx 10rpx 10rpx;background: #FAFAFC;border-radius: 10rpx;box-shadow: 0px 0px 15px #FAFAFC;
		.weui-cell-line {margin-left: 5px;border-left: 1px solid #EEEEEE;min-height: 160rpx;position: relative;}
		.weui-cell-list:first-child .weui-cell-circle {border: 1px solid $dtg-color-primary;background-color: $dtg-color-primary;}
		.weui-cell-list .weui-cell-circle { position: absolute;left: -17rpx;top: 30rpx;background-color: $dtg-color-primary;
			width: 15px;height: 15px;border: 0;border-radius: 10px;display: flex;justify-content: center; align-items: center;}
		.weui-cell-circle>view { border: 1px solid white;border-radius: 5px;width: 7px;height: 7px;background-color: white;border-color: white;}
		.weui-cell-time { font-size: 12px;padding-left: 15px;width: 100%;color: #999999;padding-top: 15px;}
		.weui-cell-event { padding:20rpx; margin: 10rpx  0 30rpx 30rpx;font-size: 14px;color: #333333;background-color: white;border-radius: 5px;line-height: 45rpx;}
		.weui-cell-list:last-child .weui-cell-line {border: 0;}
		.inptu {width: 94%; margin: 50rpx auto;height: 6rem;background-color: white;border-radius: 10rpx;box-shadow: 0px 0px 15px #FAFAFC}
		.area {width: 100%;height: 240rpx; padding: 15rpx 20rpx;box-sizing: border-box;}
	}
	.btn{margin-bottom: 80rpx;}
</style>
